<template>
  <div v-if="hero">
    <h2>{{hero.name.toUpperCase()}} Details</h2>
    <div><span>id: </span>{{hero.id}}</div>
    <div><span>name: </span>{{hero.name}}</div>
    <label>name:
      <input v-model="hero.name" placeholder="name">
    </label>
    <button @click="goBack">goBack</button>
  </div>
</template>

<script>
export default {
  // props: {
  //   hero: {
  //     type: Object
  //   }
  // },
  data () {
    return {
      hero: null
    }
  },
  created () {
    const id = this.$route.params.id
    this.$http.get('/heroes/' + id).then((data) => {
      this.hero = data.data
    })
  },
  methods: {
    goBack () {
      this.$router.go(-1)
      this.$message({
        message: 'success',
        type: 'success'
      })
    }
  }
}
</script>
